/**
 * @file PersonalizedRecommendation.vue
 * @description 个性化资源推荐功能页面
 * @created 2024-03-20
 */

<template>
  <div class="personalized-recommendation">
    <div class="page-header">
      <h2>个性化推荐</h2>
    </div>

    <!-- 用户画像 -->
    <div class="user-profile">
      <div class="profile-card">
        <div class="avatar">👨‍🏫</div>
        <div class="info">
          <h3>{{ userProfile.name }}</h3>
          <p>{{ userProfile.department }}</p>
        </div>
        <div class="tags">
          <span class="tag" v-for="tag in userProfile.tags" :key="tag">
            {{ tag }}
          </span>
        </div>
      </div>
    </div>

    <!-- 推荐资源列表 -->
    <div class="recommendation-sections">
      <!-- 基于历史行为的推荐 -->
      <div class="section">
        <div class="section-header">
          <h3>根据您的浏览历史推荐</h3>
          <span class="refresh-btn">🔄 换一批</span>
        </div>
        <div class="resource-grid">
          <div class="resource-card" v-for="resource in historyRecommendations" 
               :key="resource.id">
            <div class="resource-icon">{{ resource.icon }}</div>
            <div class="resource-info">
              <h4>{{ resource.name }}</h4>
              <p>{{ resource.description }}</p>
              <div class="tags">
                <span class="tag" v-for="tag in resource.tags" :key="tag">
                  {{ tag }}
                </span>
              </div>
            </div>
            <div class="match-rate">
              匹配度 {{ resource.matchRate }}%
            </div>
          </div>
        </div>
      </div>

      <!-- 热门推荐 -->
      <div class="section">
        <div class="section-header">
          <h3>热门推荐</h3>
        </div>
        <div class="resource-grid">
          <div class="resource-card" v-for="resource in popularRecommendations" 
               :key="resource.id">
            <div class="resource-icon">{{ resource.icon }}</div>
            <div class="resource-info">
              <h4>{{ resource.name }}</h4>
              <p>{{ resource.description }}</p>
              <div class="tags">
                <span class="tag" v-for="tag in resource.tags" :key="tag">
                  {{ tag }}
                </span>
              </div>
            </div>
            <div class="popularity">
              热度 {{ resource.popularity }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 用户画像数据
const userProfile = ref({
  name: '张教授',
  department: '计算机科学与技术学院',
  tags: ['Java编程', '数据结构', '算法分析']
})

// 基于历史的推荐
const historyRecommendations = ref([
  {
    id: 1,
    icon: '📚',
    name: 'Java高级编程实践',
    description: '包含丰富的实践案例和课程设计',
    tags: ['Java', '实践教学'],
    matchRate: 98
  },
  {
    id: 2,
    icon: '📊',
    name: '数据结构与算法课件',
    description: '图文并茂的教学课件',
    tags: ['数据结构', '算法'],
    matchRate: 95
  }
])

// 热门推荐
const popularRecommendations = ref([
  {
    id: 1,
    icon: '🎯',
    name: '程序设计思维导图',
    description: '清晰的知识体系梳理',
    tags: ['编程思维', '知识图谱'],
    popularity: '12.5k'
  },
  {
    id: 2,
    icon: '📝',
    name: '算法练习题集',
    description: '经典算法题目集锦',
    tags: ['算法', '习题'],
    popularity: '10.2k'
  }
])
</script>

<style scoped>
.personalized-recommendation {
  padding: 24px;
}

.user-profile {
  margin-bottom: 32px;
}

.profile-card {
  background: white;
  padding: 24px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.avatar {
  font-size: 48px;
  margin-right: 24px;
}

.tags {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.tag {
  background: #f5f5f5;
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 12px;
}

.section {
  margin-bottom: 32px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.refresh-btn {
  color: #1890ff;
  cursor: pointer;
}

.resource-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}

.resource-card {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.resource-icon {
  font-size: 32px;
  margin-bottom: 16px;
}

.match-rate {
  margin-top: 12px;
  color: #1890ff;
  font-weight: bold;
}

.popularity {
  margin-top: 12px;
  color: #ff4d4f;
  font-weight: bold;
}
</style> 